<template>
	<div id="dataStatistics">
		<div class="breadcrumb">
			<img src="../../../static/img/appoinment_1.png" class="head_img">
			<span class="title"></span>
			<span class="dataStatisticsTitle">数据统计</span>
			<span class="turnOff" @click="cancel">关闭</span>
		</div>

		<div class="search">
			<el-select v-model="test">
				<el-option v-for='item in tests' :label='item.name' :value='item.physicalId' :key="item.physicalId"></el-option>
			</el-select>
			<el-select v-model="item">
				<el-option label="综合成绩" value='0'></el-option>
				<el-option label="BMI值" value='1'></el-option>
				<el-option label="肺活量" value='2'></el-option>
				<el-option label="50米跑" value='3'></el-option>
				<el-option label="立定跳远" value='4'></el-option>
				<el-option label="坐位体前屈" value='5'></el-option>
				<el-option label="引体向上（男）/仰卧起坐（女）" value='6'></el-option>
				<el-option label="1000米跑（男）/800米跑（女）" value='7'></el-option>
			</el-select>
			<el-select v-model="grade">
				<el-option label="全部年级" value='0'></el-option>
				<el-option v-for='item in grades' :label='item.gradeName' :value='item.id' :key="item.id"></el-option>
			</el-select>
			<el-select v-model="college">
				<el-option label="全部学院" value='0'></el-option>
				<el-option v-for='item in colleges' :label='item.department' :value='item.department' :key="item.department"></el-option>
			</el-select>

			<el-button type="primary" @click="drawPie()" class="add" :disabled="!isHavePhysicalId">筛选</el-button>
		</div>

		<div class="list">
			<div class="breadcrumb_1">数据分析情况</div>
			<el-row style="border:solid 1px #e6e6e6;">
				<el-col :span="13" style="padding-left:10px;">
					<div id="box3">
						<vue-highcharts :options="options_total" ref="pieChart_3"></vue-highcharts>
						<div class="nodata1" v-if="showInfo3">无数据</div>
					</div>
				</el-col>
				<el-col :span="12" style="padding-right:10px;">
					<div id="box1">
						<vue-highcharts :options="options_male" ref="pieChart_1"></vue-highcharts>
						<div class="nodata" v-if="showInfo1">无数据</div>
					</div>
				</el-col>
				<el-col :span="12" style="padding-left:10px;">
					<div id="box2">
						<vue-highcharts :options="options_female" ref="pieChart_2"></vue-highcharts>
						<div class="nodata1" v-if="showInfo2">无数据</div>
					</div>
				</el-col>

			</el-row>
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";
	import vFooter from "../common/Footer.vue";

	export default {
		data() {
			return {
				isHavePhysicalId: false,
				test: "",
				item: "0",
				grade: "0",
				college: "0",
				showInfo1: false,
				showInfo2: false,
				showInfo3: false,
				tests: [],
				items: [],
				grades: [],
				colleges: [],
				options_male: {
					chart: {
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					credits: {
						enabled: false
					},
					colors: ["#217cb5", "#19bd9b", "#eaeea1", "#e94c3d"],
					title: {
						text: "男生",
						align: "left",
						x: 80,
						y: 40
					},
					tooltip: {
						headerFormat: "",
						pointFormat: "<b>{point.name}</b><br> {point.percentage:.1f}%  {point.y}人"
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: "pointer",
							dataLabels: {
								enabled: true,
								format: '<b>{point.name}: {point.y}人  {point.percentage:.1f}%'
							},
							showInLegend: true
						}
					},
					series: [
						{
							type: "pie",
							name: "",
							data: []
						}
					]
				},
				options_female: {
					chart: {
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					credits: {
						enabled: false
					},
					colors: ["#217cb5", "#19bd9b", "#eaeea1", "#e94c3d"],
					title: {
						text: "女生",
						align: "left",
						x: 80,
						y: 40
					},
					tooltip: {
						headerFormat: "",
						pointFormat:
							"<b>{point.name}</b><br> {point.percentage:.1f}%  {point.y}人"
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: "pointer",
							dataLabels: {
								enabled: true,
								format: '<b>{point.name}: {point.y}人  {point.percentage:.1f}%'
							},
							showInLegend: true
						}
					},
					series: [
						{
							type: "pie",
							name: "",
							data: []
						}
					]
				},
				options_total: {
					chart: {
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					credits: {
						enabled: false
					},
					colors: ["#217cb5", "#19bd9b", "#eaeea1", "#e94c3d"],
					title: {
						text: "总体",
						align: "left",
						x: 80,
						y: 40
					},
					tooltip: {
						headerFormat: "",
						pointFormat: "<b>{point.name}</b><br> {point.percentage:.1f}%  {point.y}人"
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: "pointer",
							dataLabels: {
								enabled: true,
								format: '<b>{point.name}: {point.y}人  {point.percentage:.1f}%'
							},
							showInLegend: true
						}
					},
					series: [
						{
							type: "pie",
							name: "",
							data: []
						}
					]
				}
			};
		},
		components: { vFooter },
		mounted() {
			this.getGrades();
			this.getAllTest();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//获取体测下拉列表
			getAllTest() {
				let url = this.$util.domain + "/physicaltest/common/testitemlist";

				this.$http({
					url,
					method: "POST"
				}).then(response => {
					if (response.data.error == 10000) {
						if (response.data.data && response.data.data.length > 0) {
							this.tests = response.data.data;
							this.test = this.tests[0].physicalId;
							this.isHavePhysicalId = true;

							this.getColleges();
						}
					}
				});
			},
			//获取所有年级
			getGrades() {
				let year = new Date().getFullYear();
				let yearArray = [];
				for (let i = 0; i < 7; i++) {
					yearArray.push({
						gradeName: year + "级",
						id: year * 1
					});
					year = year - 1;
				}
				this.grades = yearArray;
			},
			//获取所有学院
			getColleges() {
				let url = this.$util.domain + "/campusadminapi/v1/tools/departments";
				this.colleges = [];

				this.$http({
					url,
					method: "GET",
					params: {
						rootUnid: this.user.rootUnid
					}
				}).then(response => {
					if (response.data.error == 10000) {
						this.colleges = response.data.data;
						this.drawPie();
					}
				});
			},
			//画饼
			drawPie() {
				let url = this.$util.domain + "/physicaltest/statistics";

				// if(!this.test){
				// 	return;
				// }

				this.$http({
					url,
					method: "POST",
					body: JSON.stringify({
						department: this.college,
						grade: parseInt(this.grade),
						physicalId: parseInt(this.test),
						scoreContent: this.item * 1
					})
				}).then(response => {
					let pieChart_1 = this.$refs.pieChart_1; //男生
					let pieChart_2 = this.$refs.pieChart_2; //女生
					let pieChart_3 = this.$refs.pieChart_3;
					pieChart_1.removeSeries();
					pieChart_2.removeSeries();
					pieChart_3.removeSeries();
					if (response.data.error == 10000) {
						//请求成功；
						let dataObj = response.data.data;
						this.showInfo1 = false;
						this.showInfo2 = false;
						this.showInfo3 = false;
						let array_male = [
							["优秀", dataObj.maleExcellent],
							["良好", dataObj.maleGood],
							["及格", dataObj.malePass],
							["不及格", dataObj.maleNopass]
						];
						let array_female = [
							["优秀", dataObj.femaleExcellent],
							["良好", dataObj.femaleGood],
							["及格", dataObj.femalePass],
							["不及格", dataObj.femaleNopass]
						];
						let array_total = [
							["优秀", dataObj.maleExcellent + dataObj.femaleExcellent],
							["良好", dataObj.maleGood + dataObj.femaleGood],
							["及格", dataObj.malePass + dataObj.femalePass],
							["不及格", dataObj.maleNopass + dataObj.femaleNopass]
						];

						let passRate = 100 - (dataObj.maleNopass + dataObj.femaleNopass) / (dataObj.maleTotal + dataObj.femaleTotal) * 100;
						passRate = Number.isNaN(passRate) ? 0 : passRate.toFixed(1);

						pieChart_1.addSeries({
							type: "pie",
							name: "",
							innerSize: "80%",
							data: array_male
						});
						pieChart_1.chart.title.update({
							text: "男生：" + dataObj.maleTotal + "人"
						});
						pieChart_2.addSeries({
							type: "pie",
							name: "",
							innerSize: "80%",
							data: array_female
						});
						pieChart_2.chart.title.update({
							text: "女生：" + dataObj.femaleTotal + "人"
						});
						pieChart_3.addSeries({
							type: "pie",
							name: "",
							innerSize: "80%",
							data: array_total
						});
						pieChart_3.chart.title.update({
							text: "总体：" + (dataObj.maleTotal + dataObj.femaleTotal) + "人；合格率：" + passRate + "%"
						});
					} else {
						this.showInfo1 = true;
						this.showInfo2 = true;
						this.showInfo3 = true;
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			cancel() {
				history.back();
			}
		}
	};
</script>

<style>
	#dataStatistics {
		padding-top: 60px;
		height: calc(100% - 100px);
		background: #f7f7f8;
	}

	#dataStatistics .breadcrumb {
		background-color: #2d3243;
		color: #ffffff;
		top: 0;
	}

	#dataStatistics .dataStatisticsTitle {
		color: #ffffff;
		line-height: 60px;
	}

	#dataStatistics .turnOff {
		color: #ffffff;
		float: right;
		padding-right: 100px;
		line-height: 60px;
	}

	#dataStatistics .list {
		min-height: calc(100% - 180px);
		height: calc(100% - 180px);
		overflow: scroll;
	}

	#dataStatistics .breadcrumb_1 {
		position: relative;
		height: 60px;
		line-height: 60px;
		margin-top: 14px;
		overflow: hidden;
		background: #f5f5f5;
		padding: 0px 10px;
		color: #48576a;
	}

	#dataStatistics .search {
		margin: 20px 30px;
		background: #ffffff;
		border-radius: 2px;
		height: 60px;
		line-height: 60px;
		padding: 0 25px;
	}

	#dataStatistics .el-select {
		display: inline-block;
		width: 20%;
	}

	#dataStatistics .add {
		position: absolute;
		right: 55px;
		margin-top: 12px;
	}

	#dataStatistics .config {
		position: absolute;
		right: 120px;
	}

	#dataStatistics .nodata {
		z-index: "10000";
		opacity: "1";
		position: absolute;
		color: #a0a0a0;
		top: 50%;
		left: 20%;
	}

	#dataStatistics .nodata1 {
		z-index: "10000";
		opacity: "1";
		position: absolute;
		color: #a0a0a0;
		top: 50%;
		left: 70%;
	}
</style>